<!--
 * @Author: GL
 * @Date: 2022-09-23 00:15:35
 * @LastEditors: GL
 * @LastEditTime: 2023-04-05 01:48:31
 * @Description: 主页顶部栏
-->
<template>
  <div class="bar">
    <el-menu
    background-color="#545c64"
    active-text-color="#FFFFFF"
    text-color="#FFFFFF"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
  >
    <h2>轻麦后台管理</h2>
    <div class="flex-grow" />
    <el-sub-menu index="1" class="user">
      <template #title>欢迎您，{{username}}
        <img :src="avatar" alt="" class="img">
      </template>
      <el-menu-item index="1-1" @click="profile">个人中心</el-menu-item>
      <el-menu-item index="1-2">信息通知</el-menu-item>
      <el-menu-item index="1-3">我的收藏</el-menu-item>
      <el-menu-item index="1-4" @click="loginOut">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
  </div>
</template>

<script>
import { userInfo } from "../network/user.js";
export default {
  data() {
    return {
      username:'',
      avatar:''
    }
  },
  created() {
    userInfo().then(res => {
      console.log(res);
      this.username = res.data.name
      this.avatar = res.data.pic
    })
  },
  methods:{
    profile() {
      this.$router.push('profile')
    },
    // 退出登录
    loginOut() {
      sessionStorage.removeItem('token')
      this.$router.replace('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.bar{
  background-color: #545c64;
  height: 68px;
  line-height: 68px;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
  color: #FFFFFF;
  .el-menu{
    border: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .img{
      width: 40px;
      height: 40px;
      margin: 0 5px 0 10px;
      border-radius: 5px;
    }
  }
}
</style>